<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-text="start"></p>
        <p v-html="start"></p>
        <p>{{num>10?'yes':'no'}}</p>
        <p v-bind:title="msg">{{message}}</p>
        <p v-if="seen">现在你看到我了</p>
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
        <button v-on:click="reverseMessage">逆转消息</button>
        <br><br>
        <input v-model="message">
        <ol>
            <rank-item v-for="rank in ranking" v-bind:ranks="rank" v-bind:key="rank.id"></rank-item>
        </ol>
        单价1：<input type="number" v-model="price1">
        数量1：<input type="number" v-model="number1">
        单价2：<input type="number" v-model="price2">
        数量2：<input type="number" v-model="number2">
        总价：{{sum}}
    </div>
</body>

<script>
    Vue.component('rank-item',{
        props:['ranks'],
        template:'<li>我的名次是：{{ranks.numbers}}</li>'
    });
    var data={
        start:'<b>开始Vue</b>',
        num:20,
        message:'Hello Vue.js !',
        msg:'你好 Vue.js !',
        seen:true,
        todos:[
            {text:'语文'},
            {text:'数学'},
            {text:'英语'}
        ],
        ranking:[
            {id:1,numbers:'one'},
            {id:2,numbers:'two'},
            {id:3,numbers:'three'}
        ],
        price1:1,
        number1:1,
        price2:5,
        number2:5
    };
    var vm=new Vue({
        el:'#app',
        data:data,
        methods:{
            reverseMessage:function () {
                this.message=this.message.split('').reverse().join('');
            }
        },
        computed:{
            sum:function () {
                return this.price1*this.number1+this.price2*this.number2;
            }
        }
    });

console.log(vm.$data === data); // => true
console.log(vm.$el === document.getElementById('app')); // => true
vm.$watch('num', function (newValue, oldValue) {
    console.log(newValue, oldValue) // 回调将在 `vm.num` 改变后调用
})
</script>
</html>